
<template>
  <!-- 导入 -->
  <div style="margin-top:30px">
    <!-- form -->
    <avue-form
      :option="option"
      v-model="form"
      @submit="handleSubmit"
    >
      <template
        slot-scope="{row}"
        slot="supShortAmount"
      >
        {{row.supShortAmount || '--'}}
      </template>
      <template
        slot-scope="{row}"
        slot="supUnloadAmount"
      >
        {{row.supUnloadAmount || '--'}}
      </template>
    </avue-form>

  </div>
</template>

<script>
import { fetchList, getObj, addObj, putObj, delObj, listRuleCycle, updateUsedStateToStop, updateUsedStateToUse } from '@/api/rca/swckclearrules'

export default {
  name: "CreateBankBill",
  components: {
    // TempData,
  },
  data () {
    return {
      stationCodeOptions: [],
      form: {
        lineCode: null,
        tradeDate: null,
        dynamic: []
      },
    }
  },
  props: ["dialogImportVisible", "defaultBank"],
  computed: {
    option () {
      return {
        column: [{
          label: '线路',
          prop: 'lineCode',
          type: 'select',
          props: {
            label: 'name',
            value: 'code'
          },
          dicUrl: `/rca/swckbankcashpaymentnote/listAllSubWayLine?dataType=1`,
          rules: [
            {
              required: true,
              message: '请选择线路',
              trigger: 'blur'
            }
          ]
        }, {
          "type": "date",
          "label": "交易日期",
          "prop": "tradeDate",
          format: 'yyyy-MM-dd',                  // 这是组件展示的日期格式
          valueFormat: 'yyyy-MM-dd',
          rules: [
            {
              required: true,
              message: '请选择交易日期',
              trigger: 'blur'
            }
          ]
        },
        {
          label: '子表单',
          prop: 'dynamic',
          type: 'dynamic',
          span: 24,
          children: {
            align: 'center',
            headerAlign: 'center',
            rowAdd: (done) => {
              done({
                input: '默认值'
              });
            },
            rowDel: (row, done) => {
              done();
            },
            column: [
              {
                label: '站点',
                prop: 'stationCode',
                dicData: this.stationCodeOptions,
                type: 'select',
                props: {
                  label: 'name',
                  value: 'code'
                },
              }, {
                width: 300,
                label: '金额',
                prop: "amount",
                type: 'number'
              }, {
                width: 300,
                label: '补短款金额',
                prop: "supShortAmount",
                formslot: true,
              }, {
                width: 300,
                label: '补卸载金额',
                prop: "supUnloadAmount",
                formslot: true,
              }]
          }
        },]
      }
    }
  },
  watch: {
    'form.lineCode': async function (val) {
      const res = await listSubWayStation({ lineCode: val, dataType: 1 });
      this.stationCodeOptions = res.data.data
      this.form.dynamic.forEach(item => {
        this.$set(item, 'lineCode', val);
        this.$set(item, 'stationCode', null);
      })
    },
  },
  methods: {
    handleSubmit (form) {
      this.$message.success(JSON.stringify(this.form))
    },
    handleClose () {
      this.$emit("close");
    },
    handleCancel () {
      this.handleClose();
    },
  },
};
</script>
<style lang="scss">
</style>
